<main class="address-list-tab">
    <div class="bt-search">
        <p>(模块介绍：短地址分组管理)</p>

        <!-- seach START -->
        <div nz-space class="search-box">
            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">名称</label>
                <div class="seach-control">
                    <input nz-input maxlength="8" [(ngModel)]="queryForm.name" placeholder="请输入" />
                </div>
            </div>

            <div *nzSpaceItem class="seach-item">
                <button nz-button nzType="primary" class="mrt8" (click)="onQuery()">查询</button>
                <button nz-button nzType="default" (click)="resetQuery()">重置</button>
            </div>
        </div>
        <!-- seach END -->
        
        <div class="bt-box">
            <button nz-button nzType="primary" (click)="onOpenAddModal()" *ngIf="permission.userPermission.has('config:configShortAddress:add')"> + 添加</button>
        </div>
    </div>
    <nz-table #rowSelectionTable nzShowSizeChanger [nzData]="tableData?.records" [nzShowPagination]="false"
        [nzPageSize]="queryForm.pageSize" nzBordered>
        <thead>
            <tr>
                <th nzAlign="center">ID</th>
                <th nzAlign="center" nzWidth="40%">名称</th>
                <th nzAlign="center" nzWidth="40%">简介</th>
                <th nzAlign="center" nzWidth="15%">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of rowSelectionTable.data; let i=index">
                <!-- ID -->
                <td nzAlign="center">{{item.id || '-'}}</td>
                <!-- 名称 -->
                <td nzAlign="center">{{item.name || '-'}}</td>
                <!-- 简介 -->
                <td nzAlign="center">{{item.intro || '-'}}</td>
                <!-- 操作 -->
                <td nzAlign="center">
                    <a nz-button nz-button-tdlink nzType="link" (click)="onTableEdit(item)" *ngIf="permission.userPermission.has('config:configShortAddress:edit')">编辑</a>
                    <a nz-button nz-button-tdlink nzType="link" nzDanger nz-popconfirm nzPopconfirmTitle="确认删除吗?" *ngIf="permission.userPermission.has('config:configShortAddress:delete')"
                        [nzIcon]="iconTpl" (nzOnConfirm)="onTableDelete(item)">删除</a>
                    <ng-template #iconTpl>
                        <i nz-icon nzType="question-circle-o" style="color: red;"></i>
                    </ng-template>
                </td>
            </tr>
        </tbody>
    </nz-table>
    <div class="pagination-box">
        <div class="pagination-template">
            <ng-template #totalTemplate let-total> 共有 {{ total }} 条 </ng-template>
            <nz-pagination [nzPageSizeOptions]="[10, 20, 50, 100]" nzShowSizeChanger nzShowQuickJumper
                [nzPageIndex]="tableData?.current" [nzTotal]="tableData?.total" [nzShowTotal]="totalTemplate"
                [nzPageSize]="queryForm.pageSize" (nzPageIndexChange)="onPageIndexChange($event)"
                (nzPageSizeChange)="onPageSizeChange($event)">
            </nz-pagination>
        </div>
    </div>
</main>
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="modalForm.id ? '编辑地址信息' : '添加地址信息'" (nzOnCancel)="onCancel()"
    [nzFooter]="null">
    <ng-container *nzModalContent>
        <nz-form-item>
            <nz-form-label nzRequired [nzSpan]="4">名称</nz-form-label>
            <nz-form-control [nzSpan]="14">
                <input nz-input [(ngModel)]="modalForm.name" placeholder="请输入分组" />
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-label nzRequired [nzSpan]="4">简介</nz-form-label>
            <nz-form-control [nzSpan]="14">
                <input nz-input [(ngModel)]="modalForm.intro" placeholder="请输入简介" />
            </nz-form-control>
        </nz-form-item>
        <footer class="modal-foot">
            <button nz-button nzType="default" (click)="onCancel()">取消</button>
            <button nz-button nzType="primary" (click)="onConfirm()">确定</button>
        </footer>
    </ng-container>
</nz-modal>
